import React, { Component } from 'react';
import './Activities.css'
import {withRouter} from 'react-router-dom';


class Activities extends Component{
    constructor(){
        super();
        this.state = {
            activities : [],
            isLoad:false
        }
    }
    goBack(){
        this.props.history.goBack();
    }
    render(){
        // console.log(this.state.goods);
        if(this.state.isLoad){
            var lis = this.state.activities.map((obj,ind)=>(
                <li key={ind}>
                    <div>
                        <span>{obj.name}</span>
                        <b>已结束</b>
                    </div>
                    <img src={"http://localhost:3001/img/"+obj.img} alt=""/>
                    <i>活动时间：{obj.time}</i>
                </li>
            ))
            // setTimeout(()=>{
            //     this.props.myscroll.refresh();
            // },1000)
        }

        return(
            <div className="Activities">
                <div className="Header">
                    <div className="HeaderLeft">
                        <i className="fa fa-angle-left" onClick={this.goBack.bind(this)}></i>
                    </div>
                    <div className="HeaderCenter">
                        <span>活动馆</span>
                    </div>
                    <div className="HeaderRight">
                        <i className="fa fa-reorder" onClick={() => {
                            this.props.fn()
                        }}></i>
                    </div>
                </div>
                <div className="container">
                    {this.state.isLoad&&<ul>{lis}</ul>}
                </div>
            </div>
        )
    }
    componentDidMount(){
        this.$axios.get("http://localhost:3001/activities").then(res=>{
            this.setState(state=>{
                state.activities = res.data;
                state.isLoad=true;
                return state;
            })
        })
    }
}

export default withRouter(Activities);